/*入口函数 */
$(function () {


 
/* 1,到服务端获取数据，渲染页面 */
/* 请求参数对象,需要请求的数据可以查看API文档 */
var  QueryObj={
    /* 产品名称，即是url地址 */
    proName:$.getQueryString("key"),
    /* 品牌id，如果不知道就写空 */
    brandld:"",
    /* 价格，1是升序，2是降序 */
    price:"",
    /* 销量，1是升序，2是降序 */
    num:"",
    /* 第几页 */
    page:1,
    /* 每页的条数，页容量 */
    pageSize:4
};

    var pageCount =1;
init();

/* 到服务端请求数据，因后期要多次使用，所以封装 */
/* queryProduct(callback) */
function queryProduct(callback) {
    $.get("/product/queryProduct", QueryObj, function (result) {
         console.log(result); 
        callback && callback(result);
        /* 服务器响应回来的数据中有包含count，我们需要获取总页数，需要通过count，所以需要在这里获取 */
         pageCount = Math.ceil(result.count/QueryObj.pageSize);
       /*   console.log(pageCount); */
    })
}

   function init() {
       /* 拉下刷新 */
       mui.init({
           pullRefresh: {
               container: "#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
               down: {
                   height: 50,//可选,默认50.触发下拉刷新拖动距离,
                   auto: true,//可选,默认false.首次加载自动下拉刷新一次
                   contentdown: "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                   contentover: "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                   contentrefresh: "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                   callback: function () {
                       /* 每次上拉刷新的时候，需要重置一次分页到当前页，不然会出现之前的页码 */
                       QueryObj.page =1;
                         /* 结束拉下刷新 的时候发送请求*/
                         queryProduct(function (result) {
                             /* 请求发送后，获取数据，渲染页面 */
                             /* 复杂结构使用模板引擎
                             1，引入模板
                             2，写模板
                             3，调用模板的方法,后面追加的数据是对谁添加的 */
                             var html = template("it_tt",result);
                             $(".gl_two").html(html);
                         });
                         mui('#refreshContainer').pullRefresh().endPulldownToRefresh(true);
                         /* 重置组件，让第二次上拉刷新的时候，显示出数据 */
                         mui('#refreshContainer').pullRefresh().refresh(true);
                   }
               },
               up: {
                   height: 50,//可选.默认50.触发上拉加载拖动距离
                   auto: true,//可选,默认false.自动上拉加载一次
                   contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                   contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                   callback: function () {
                    /* 下拉刷新的时候，判断当前页是不是最后一页 */
                       if (QueryObj.page>=pageCount){
                           /* 如果下拉大于最大页码，就停止执行代码 */
                           mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                            return;

                    }else{
                        /* 继续执行代码 */
                           QueryObj.page++;
                           /* 执行代码的时候，需要刷新请求数据 ，因为是拉下刷新，再次调用上下刷新的组件不好，所以我们需要自己再次调用刷新*/
                           queryProduct(function (result) {
                               /* 请求发送后，获取数据，渲染页面 */
                               /* 复杂结构使用模板引擎
                               1，引入模板
                               2，写模板
                               3，调用模板的方法,后面追加的数据是对谁添加的 */
                               /* 刷新渲染到页面，但是因我们需要老的数据，不要把前面的数据覆盖掉，所以需要那html改变成append
                               html会覆盖掉之前的，append不会覆盖掉 */
                               var html = template("it_tt", result);
                               $(".gl_two").append(html);
                               mui('#refreshContainer').pullRefresh().endPullupToRefresh();
                           })
                    }
                    

                   }
               }
           }
       });


       /* 绑定点击事件 */
       $(".btn").on("tap",function () {
           /* 检测点击事件是否成功 */
          /*  console.log(123); */
          /*  获取input里面的商品名称，使用val（）*/
           var key = $(".searchTxt").val();
          /*  console.log(key); */
          /* 把商品名称赋值给全局对象,因为我在封装好的发送请求的数据，使用的是全局参数对象发送过去的 */
           QueryObj.proName = key;
          /*  console.log(QueryObj.proName); */
       /*   console.log(QueryObj); */
       /* 手动触发下拉刷新，使用下拉刷新组件 */
           mui("#refreshContainer").pullRefresh().pulldownLoading();
       })

       /* 筛选条件，根据箭头方向 */
       $(".lt_screen a").on("tap",function (e) {
           /* 查看下点击事件是否绑定成功 */
           /* console.log(123); */
           /* 需要区分我点击的是哪个a标签，我们使用自定义属性，根据文档API进行分析，里面有需要我们判断的写数据，没有的写为空 */
           /* 在tap中获取a标签的方法 ,根据事件里面的e的garget,*/
           /* 因为a标签里面包含了span标签，所以当点击a标签的时候，不止会获取到a标签，也有可能是span标签，所以我们需要进行判断
           使用三元表达式，当是元素是a标签的时候，等于他自己，如果是span的话，等于他的父元素a标签 */
          /* 1 console.log(e); */
           var Doma = e.target.nodeName=="A"? e.target:e.target.parentNode;
          /* console.log(Doma);获取a标签的自定义属性 */
            var sortname = Doma.dataset.sortname; 
        /*    var sortname = $(Doma).data.sortname; */
           /*  console.log(sortname);  */
          /* 2,切换箭头方向 */
          /* 通过find的方法找到子元素，通过切换字体图标，上下箭头 */
            $(Doma).find(".mui-icon").toggleClass("mui-icon-arrowdown mui-icon-arrowup");

            /* 判断是升序还是降序 */
            var sort =1;
            if ($(Doma).find(".mui-icon").hasClass("mui-icon-arrowdown")){
                sort=2;
            }else{
                sort = 1;
            }
            /* 触发发送请求，数据传送里面的值需要改变成现在我们的，获取对象的属性的方式是 ,如果不重新赋值，会出现
            对价格或者数量进行升序降序后，数值还是有携带之前留下的，所以需要在赋值之前，先清空*/
            QueryObj.price="";
            QueryObj.num ="";
            QueryObj[sortname]= sort;
            /* 数据拿到触发发送请求 */
            mui("#refreshContainer").pullRefresh().pulldownLoading();

       })


       /* 给a标签注册点击事件，携带数据跳转 */
       $(".gl_two").on("tap",".gl_goumai",function (e) {
          /*  console.log(123); */
           /* 获取a标签跳转 */
         var Doma = e.target;
        console.log(Doma);
        location.href =Doma.href;  
       })
   }




})